<template>
  <div class="span4">
    <ul class="home-channel-list clearfix">
      <li v-for="i in 6" :key="i">
        <a href="https://www.mi.com/buy/seckill">
          <img src="../../../assets/imgs/xiaosha.png" alt="小米秒杀" />
          小米秒杀
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.span4 {
  width: 234px;
}
.home-channel-list {
  margin: 0;
  padding: 3px;
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  background: #5f5750;
  li {
    position: relative;
    float: left;
    width: 70px;
    height: 82px;
    padding: 0 3px;
    a {
      display: block;
      padding-top: 18px;
      text-overflow: ellipsis;
      color: #fff;
      opacity: 0.7;
      -webkit-transition: opacity 0.2s;
      transition: opacity 0.2s;
      img {
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto 4px;
      }
    }
  }
}
.home-channel-list a:hover {
  opacity: 1;
}
</style>